<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :before-close="handleClose"
    :title="title"
    width="900px">
    <dynForm ref="dataForm" :info-form="handleform" :search-tags="searchTags" :rules="rules"/>
    <p class="info—title">
      <span>{{ $t('intervalValueInformation') }}</span>
      <el-button type="success" size="mini" @click="handleAdd">{{ $t('add') }}</el-button>
    </p>
    <dynTable
      ref="dynTable"
      :loading="false"
      :table-data="handleform.standInfoList"
      :table-columns="tableColumns"
    />
    <span slot="footer">
      <el-button icon="el-icon-circle-close" @click="handleClose">{{
        $t("cancel")
      }}</el-button>
      <el-button v-btnThrottle="doSave" type="primary" icon="el-icon-receiving">{{
        $t("save")
      }}</el-button>
  </span></el-dialog>
</template>

<script>
import networkTips from '@/mixins/networkTips'
import mySetting from '@/mixins/mySetting'
import stageLifeApi from '@/api/Tooling/toolingStageLife'
export default {
  name: '',
  components: {},
  mixins: [networkTips, mySetting],
  props: {},
  data() {
    return {
      title: '',
      dialogVisible: false,
      handleform: {
        standInfoList: []
      },
      searchTags: [
        { label: this.$t('customer'), prop: 'custName', tag: 'DynInput' },
        { label: this.$t('productName'), prop: 'productName', tag: 'DynInput' },
        { label: this.$t('lifeTime'), prop: 'lifeTime', tag: 'DynInput' }
      ],
      rules: {
        custName: [
          { required: true, message: `${this.$t('pleaseSelect')}${this.$t('customer')}`, trigger: 'blur' }
        ],
        productName: [
          { required: true, message: `${this.$t('pleaseSelect')}${this.$t('productName')}`, trigger: 'blur' }
        ],
        lifeTime: [
          { required: true, message: `${this.$t('pleaseSelect')}${this.$t('lifeTime')}`, trigger: 'blur' }
        ]
      },
      tableData: [],
      tableColumns: [
        { prop: '', label: this.$t('index'), type: 'index', width: '50px', templete: (_scope) => {
          return (
            <span>{ (this.listQuery.page - 1) * this.listQuery.size + _scope.$index + 1 }</span>
          )
        } },
        { prop: 'startIndex', label: this.$t('startIndex'), templete: (_scope) => {
          return (
            <el-input vModel={_scope.row.startIndex}
              clearable
              size={'mini'}
              nativeOnKeyup={(e) => {
                _scope.row.startIndex = e.target.value.replace(/[^\d.]/g, '')
              }} />
          )
        } },
        { prop: 'endIndex', label: this.$t('endIndex'), templete: (_scope) => {
          return (
            <el-input vModel={_scope.row.endIndex}
              clearable
              size={'mini'}
              nativeOnKeyup={(e) => {
                _scope.row.endIndex = e.target.value.replace(/[^\d.]/g, '')
              }} />
          )
        } },
        { prop: 'standNumber', label: this.$t('standNumber'), templete: (_scope) => {
          return (
            <el-input vModel={_scope.row.standNumber}
              clearable
              size={'mini'}
              nativeOnKeyup={(e) => {
                _scope.row.standNumber = e.target.value.replace(/[^\d.]/g, '')
              }} />
          )
        } },
        { prop: '', label: this.$t('action'), templete: (_scope) => {
          return (
            <el-link
              type='primary'
              underline={false}
              on-click={() => this.doConditionDelete(_scope)}
            >
              {this.$t('delete')}
            </el-link>
          )
        } }
      ]
    }
  },
  methods: {
    doSave() {
      this.$refs['dataForm'].$refs['dynForm'].validate((valid) => {
        if (valid) {
          if (this.handleform.id) {
            stageLifeApi.doUpdate(this.handleform).then(res => {
              this.netTips(res, this.handleClose, this.handleUpdate)
            })
          } else {
            stageLifeApi.doAdd(this.handleform).then(res => {
              this.netTips(res, this.handleClose, this.handleUpdate)
            })
          }
        }
      })
    },
    // 触发父组件更新
    handleUpdate() {
      this.$emit('initList')
    },
    handleAdd() {
      this.handleform.standInfoList.push({})
    },
    doConditionDelete(row) {
      this.handleform.standInfoList.splice(row.$index, 1)
    },
    handleOpen(id) {
      if (id) {
        stageLifeApi.getInfo({ id }).then((res) => {
          this.handleform = res.data
          // this.tableData = res.data.standInfoList
          this.title = this.$t('modify')
        })
      } else {
        this.title = this.$t('add')
      }
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].$refs['dynForm'].clearValidate()
      })
    },
    handleClose() {
      Object.assign(this.$data, this.$options.data.call(this))
    }
  }
}
</script>

<style scoped lang="scss">
.info—title{
  width: 100%;
  display: flex;
  justify-content: space-between;
}
</style>
